<link href="/Public/css/common/jquery.stepy.css" rel="stylesheet">
<link href="/Public/css/common/switchery.css" rel="stylesheet" />
<style>
    .style .style-box img{width:200px; height:350px; padding:20px; margin:auto 0;}
    .image-upload{position:absolute;left:150px;margin-top:70px}
    .follow_delay_time{margin-left:40px}
    .ad-delete{position:absolute;left:110px;top:50px;}
</style>
<?php
    use User\Model\LiveModel;
?>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <present name="live_topic">编辑<else/>添加</present>话题
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="square-widget">
                        <div class="widget-container">
                            <div class="stepy-tab"></div>
                            <form id="default" class="form-horizontal" action="/User/Live/updateTopic" method="post" enctype="multipart/form-data" onsubmit="return formcheck();">
                                <input type="hidden" name="id" value="{$id}">
                                <fieldset title="基本信息">
                                    <legend>第一步</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>直播主题</label>
                                        <div class="col-lg-6">
                                            <input class="form-control valid" name="topic_title" title="请输入直播主题" value="{$live_topic['topic_title']}" placeholder="请输入直播主题">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 col-sm-2 control-label">直播简介</label>
                                        <div class="col-lg-6">
                                            <textarea name="topic_info" class="form-control" rows="5">{$live_topic['topic_info']}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>开始时间</label>
                                        <div class="col-lg-6">
                                            <input class="form-control date-picker valid" title="请输入开始时间" id="start" name="startdate" value="{$live_topic['startdate']}" placeholder="请输入开始时间" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>结束时间</label>
                                        <div class="col-lg-6">
                                            <input class="form-control date-picker valid" title="请输入结束时间" id="end" name="enddate" value="{$live_topic['enddate']}" placeholder="请输入结束时间" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>直播类型</label>
                                        <div class="col-lg-6">
                                            <label class="radio-inline" style="display:inline-block">
                                                <input type="radio" name="topic_type" onclick="topicType(1);" <if condition="($live_topic.topic_type eq LiveModel::TOPIC_TYPE_VIDEO) OR ($live_topic.topic_type eq null)">checked="checked"</if> value="<?php echo LiveModel::TOPIC_TYPE_VIDEO; ?>">&nbsp;视频直播
                                            </label>
                                            <label class="radio-inline" style="display:inline-block">
                                                <input type="radio" name="topic_type" onclick="topicType(2);" <if condition="$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG">checked="checked"</if> value="<?php echo LiveModel::TOPIC_TYPE_MSG; ?>">&nbsp;图文直播
                                            </label>
                                            <label class="radio-inline" style="display:inline-block">
                                                <input type="radio" name="topic_type" onclick="topicType(3);" <if condition="$live_topic.topic_type eq LiveModel::TOPIC_TYPE_ALL">checked="checked"</if> value="<?php echo LiveModel::TOPIC_TYPE_ALL; ?>">&nbsp;视频+图文直播
                                            </label>
                                            <br><br>
                                            <div class="panel">
                                                <div class="panel-heading custom-tab">
                                                    <ul class="nav nav-tabs">
                                                        <li class="active" <if condition="$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG">style="display:none"</if>><a href="#video" onclick="$('#video').show();$('#msg').hide();" data-toggle="tab">视频直播</a></li>
                                                        <li class="<if condition='$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG'>active</if>" <if condition="($live_topic.topic_type eq LiveModel::TOPIC_TYPE_VIDEO) OR ($live_topic.topic_type eq null)">style="display:none"</if>><a href="#msg" onclick="$('#video').hide();$('#msg').show();" data-toggle="tab">图文直播</a></li>
                                                    </ul>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="tab-content">
                                                        <div class="tab-pane active" id="video" <if condition="$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG">style="display:none"</if>>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">直播封面</label>
                                                                <div class="col-lg-6">
                                                                    <input type="hidden" name="video_poster" value="{$live_topic['video_poster']}">
                                                                    <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                                    <img src="{$live_topic['video_poster']}" class="thumbnail" width="100" height="100">
                                                                    <p class="help-block">图片为200px*200px的png、jpg格式图片</p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">广告设置</label>
                                                                <div class="col-lg-8">
                                                                    <input class="form-control" name="ad_link" value="{$live_topic['ad_link']}" placeholder="链接地址"><br/>
                                                                    <input type="hidden" name="ad_image" class="ad_image" value="{$live_topic['ad_image']}">
                                                                    <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                                    <img src="{$live_topic['ad_image']}" class="thumbnail" width="100" height="100">
                                                                    <a href="javascript:;" class="ad-delete <if condition='$live_topic.ad_image eq NULL'>hidden</if>"><img src="/Public/images/unchecked.jpg"></a>
                                                                    <p class="help-block">图片为100px*100px的png、jpg格式图片</p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">推流地址</label>
                                                                <div class="col-lg-8">
                                                                    <input class="form-control" name="input_stream" value="{$live_topic['input_stream']}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">直播流</label>
                                                                <div class="col-lg-8">
                                                                    <input class="form-control" name="output_stream" value="{$live_topic['output_stream']}">
                                                                    <p class="help-block">默认使用本服务器的直播流，可使用第三方直播流</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane <if condition='$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG'>active</if>" id="msg" <if condition="($live_topic.topic_type eq LiveModel::TOPIC_TYPE_VIDEO) OR ($live_topic.topic_type eq null)">style="display:none"</if>>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">图文Banner</label>
                                                                <div class="col-lg-6">
                                                                    <input type="hidden" name="banner" value="{$live_topic['banner']}">
                                                                    <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                                    <img src="{$live_topic['banner']}" class="thumbnail" width="100" height="100">
                                                                    <p class="help-block">图片为420px*190px的png、jpg格式图片</p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">直播封面</label>
                                                                <div class="col-lg-6">
                                                                    <input type="hidden" name="msg_poster" value="{$live_topic['msg_poster']}">
                                                                    <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                                    <img src="{$live_topic['msg_poster']}" class="thumbnail" width="100" height="100">
                                                                    <p class="help-block">图片为100px*100px的png、jpg格式图片</p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-lg-2 col-sm-2 control-label">发布顺序</label>
                                                                <div class="col-lg-6">
                                                                    <label class="radio-inline" style="display:inline-block">
                                                                        <input type="radio" name="sort" <if condition="($live_topic.sort eq LiveModel::SORT_ASC) OR ($live_topic.sort eq null)">checked="checked"</if> value="<?php echo LiveModel::SORT_ASC; ?>">&nbsp;正序
                                                                    </label>
                                                                    <label class="radio-inline" style="display:inline-block">
                                                                        <input type="radio" name="sort" <if condition="$live_topic.sort eq LiveModel::SORT_DESC">checked="checked"</if> value="<?php echo LiveModel::SORT_DESC; ?>">&nbsp;倒序
                                                                    </label>
                                                                    <p class="help-block">正序：最新发布的图文信息在最上面。</p>
                                                                    <p class="help-block">倒序：最早发布的图文信息在最上面。</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">是否开启评论</label>
                                        <div class="col-lg-6">
                                            <input type="checkbox" name="support_comment" class="js-switch" <if condition="$live_topic['support_comment'] eq LiveModel::SUPPORT_ACTIVE">checked</if>/>
                                        </div>
                                    </div>
                                    <div class="live-part" <if condition="$live_topic.topic_type eq LiveModel::TOPIC_TYPE_MSG">style="display:none"</if>>
                                        <div class="form-group">
                                            <label class="col-lg-2 col-sm-2 control-label">是否强制关注</label>
                                            <div class="col-lg-6">
                                                <input type="checkbox" name="support_follow" class="js-switch" <if condition="$live_topic['support_follow'] eq LiveModel::SUPPORT_ACTIVE">checked</if>/>
                                                <empty name="live_topic.follow_delay_time">
                                                    <span class="follow_delay_time" <if condition="($live_topic['support_follow'] eq LiveModel::SUPPORT_DELETE) OR ($live_topic['support_follow'] eq null)">style="display:none"</if>>视频直播 <input class="form-control" style="display:inline-block;width:100px" name="follow_delay_time" value="10"> s后强制关注</span>
                                                <else/>
                                                    <span class="follow_delay_time" <if condition="$live_topic['support_follow'] eq LiveModel::SUPPORT_DELETE">style="display:none"</if>>视频直播 <input class="form-control" style="display:inline-block;width:100px" name="follow_delay_time" value="{$live_topic['follow_delay_time']}"> s后强制关注</span>
                                                </empty>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 col-sm-2 control-label">是否开启点赞</label>
                                            <div class="col-lg-6">
                                                <input type="checkbox" name="support_praise" class="js-switch" <if condition="$live_topic['support_praise'] eq LiveModel::SUPPORT_ACTIVE">checked</if>/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 col-sm-2 control-label">是否显示人气值</label>
                                            <div class="col-lg-6">
                                                <input type="checkbox" name="support_online_num" class="js-switch" <if condition="$live_topic['support_online_num'] eq LiveModel::SUPPORT_ACTIVE">checked</if>/>
                                            </div>
                                        </div>
                                        <div class="form-group online_multi" <if condition="($live_topic['support_online_num'] eq LiveModel::SUPPORT_DELETE) OR ($live_topic['support_online_num'] eq null)">style="display:none"</if>>
                                            <label class="col-lg-2 col-sm-2 control-label">人气值基数</label>
                                            <div class="col-lg-6">
                                                <empty name="live_topic.online_multi">
                                                    <input class="form-control" name="online_multi" value="0">
                                                <else/>
                                                    <input class="form-control" name="online_multi" value="{$live_topic['online_multi']}">
                                                </empty>
                                                <!--<p class="help-block">公式：虚拟在线人数≈实际在线人数*倍率</p>-->
                                                <!--<p class="help-block">模拟：-->
                                                <!--<input class="form-control" id="real-people" style="width:100px; display:inline-block" value="100">（实际人数）*-->
                                                <!--<input class="form-control" id="multi" style="width:100px; display:inline-block" value="2">（倍率）-->
                                                <!--<span class="btn btn-default" id="calculate" title="计算">计算</span>-->
                                                <!--</p>-->
                                                <!--<p class="help-block">结果：虚拟在线人数<span id="virtual-result" style="color:red">200</span></p>-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">是否开启评论审核</label>
                                        <div class="col-lg-6">
                                            <input type="checkbox" name="support_comment_check" class="js-switch" <if condition="$live_topic['support_comment_check'] eq LiveModel::SUPPORT_ACTIVE">checked</if>/>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset title="人员设置">
                                    <legend>第二步</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>助理主播密码</label>
                                        <div class="col-lg-6">
                                            <input class="form-control valid" name="assist_pwd" title="请输入助理主播密码" value="{$live_topic['assist_pwd']}" placeholder="请输入助理主播密码">
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset title="分享设置">
                                    <legend>第三步</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享标题</label>
                                        <div class="col-lg-6">
                                            <input class="form-control" name="share_title" value="{$live_topic['share_title']}">
                                            <p class="help-block">默认为话题名称，最多16个汉字</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享描述</label>
                                        <div class="col-lg-6">
                                            <textarea class="form-control" rows="5" name="share_desc" title="请输入分享描述">{$live_topic['share_desc']}</textarea>
                                            <p class="help-block">默认为话题简介</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享链接</label>
                                        <div class="col-lg-6">
                                            <input class="form-control" name="share_link" value="{$live_topic['share_link']}">
                                            <p class="help-block">默认是首页的链接</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"> 分享图标</label>
                                        <div class="col-lg-6">
                                            <input type="hidden" name="share_image" value="{$live_topic['share_image']}">
                                            <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                            <img src="{$live_topic['share_image']}" class="thumbnail" width="100" height="100">
                                            <p class="help-block">图片为80px*80px的png、jpg格式图片</p>
                                        </div>
                                    </div>
                                    <input type="hidden" name="room_id" value="{$room_id}">
                                    <button type="submit" class="btn btn-info finish">提交</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/Public/js/common/check-upload-file.js"></script>
<script src="/Public/js/common/switchery.js" ></script>
<script src="/Public/js/common/ios-init.js" ></script>
<script src="/Public/js/common/jquery.stepy.js"></script>
<script type="text/javascript" src="/Public/js/laydate/laydate.js"></script>
<script type="text/javascript">
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function(datas){
            end.min = datas;
            end.start = datas
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function(datas){
            start.max = datas;
        }
    };
    laydate(start);
    laydate(end);
    laydate.skin("molv");

    function topicType(type){
        if(type == 1){
            $('.nav-tabs li:eq(0)').addClass('active').show();
            $('.nav-tabs li:eq(1)').removeClass('active').hide();
            $('#video').show();
            $('#msg').hide();
            $('.live-part').show();
        }else if(type == 2){
            $('.nav-tabs li:eq(0)').removeClass('active').hide();
            $('.nav-tabs li:eq(1)').addClass('active').show();
            $('#video').hide();
            $('#msg').show();
            $('.live-part').hide();
        }else{
            $('.nav-tabs li:eq(0)').addClass('active').show();
            $('.nav-tabs li:eq(1)').removeClass('active').show();
            $('#video').show();
            $('#msg').hide();
            $('.live-part').show();
        }
    }

    $("input[name=support_follow]").on("change", function () {
        $(".follow_delay_time").toggle();
    });

    $("input[name=support_online_num]").on("change", function(){
        $(".online_multi").toggle();
    });

    function uploadImage(c, types, size, kb, isCheck, isImage){
        var img = c.files[0];
        var _this = $(c);
        var url = "/User/Live/uploadFile";
        checkFile(_this, img, types, size, kb, isCheck, isImage, url);
        $('.ad-delete').removeClass('hidden');
    }

    $('.ad-delete').on('click', function(){
       $(this).prev('img').removeAttr('src');
       $('.ad_image').val('');
       $(this).addClass('hidden');
    });

    $('#default').stepy({
        backLabel: '上一步',
        block: true,
        nextLabel: '下一步',
        titleClick: true,
        titleTarget: '.stepy-tab',
        finishButton:false
    });

    $(".button-back").click(function(){
        $('html,body').animate({scrollTop:0},'800');
    })

    $(".button-next").click(function(){
        $('html,body').animate({scrollTop:0},'800');
    })

    $('#calculate').click(function(){
        var real_people = parseInt($("#real-people").val());
        var multi = parseFloat($("#multi").val());
        var result = Math.round(real_people * multi);
        $("#virtual-result").html(result);
    });

    function formcheck() {
        var ret = true;
        $('fieldset:eq(0)').find('.valid').each(function(){
            if($(this).val() == ''){
                reLocate(0, 0);
                alert($(this).attr('title'));
                ret = false;
                return ret;
            }
        })
        if(ret == true){
            if($("input[name=assist_pwd]").val() == ''){
                reLocate(1, 0);
                alert($("input[name=assist_pwd]").attr('title'));
                ret = false;
                return ret;
            }
        }
        $('html,body').animate({scrollTop:0},'800');
        return ret;
    }

    function reLocate(num, location){
        $("#default-titles").children("li").removeClass("current-step");
        $("#default-title-"+num).addClass("current-step");
        $("#default-step-2").css("display", "none");
        $("#default-step-"+num).css("display", "block");
        $('html,body').animate({scrollTop:location},'800');
    }
</script>